<h3 mat-dialog-title>
  交易对
  &nbsp;&nbsp;
  <span class="head-field ccy-logo-code">
      <img class="ccy-logo" [src]="CoinLogoPath(baseCcy)" alt="">
      <span class="ccy-code">{{baseCcy}}</span>
  </span>
</h3>

<mat-dialog-content>

  <table mat-table class="full-width" matSort matSortActive="concerned" matSortDirection="desc">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1}}
      </td>
    </ng-container>

    <ng-container matColumnDef="concerned">
      <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">
        <mat-icon>star_outline</mat-icon>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="clickable" [class.favorite]="row.concerned" (click)="toggleConcern(row)">
          {{row.concerned ? 'star' : 'star_outline'}}</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基础币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
        <span class="ccy-code">{{row.baseCcy}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="oeSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">OE</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.oeSymbol">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="baSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">BA</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.baSymbol">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="hbSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">HB</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.hbSymbol">check</mat-icon>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

</mat-dialog-content>

<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>关闭</button>
</div>
